<template>
  <div>
    <Row>
      <i-col span="8">
        <b-card header="数据集" header-tag="h6" class="mb-4">
          <v-jstree :data='data' :class="{ 'tree-rtl': isRTL }" allow-batch @item-click="itemClick" whole-row ref="tree2" />
        </b-card>
      </i-col>

      <i-col span="15" class="ml-4">
        <b-card header="下探" header-tag="h6" class="mb-4">
          <sky-table :data="table.tableData" :columns="table.columns" :show-pagination="false" :show-index="table.showIndex"></sky-table>
        </b-card>

      </i-col>
    </Row>
  </div>
</template>



<script>
import Vue from "vue";
import VJstree from "vue-jstree";
import { ClientTable } from "vue-tables-2";
import { SweetModal, SweetModalTab } from "sweet-modal-vue";

Vue.use(ClientTable);

let vueComponentThis = this;

export default {
    name: "ui-treeview",
    metaInfo: {
        title: "Treeview - UI elements"
    },
    components: {
        VJstree
    },
    data() {
        return {
            editingNode: null,
            editingItem: {}, //
            table: {
                showIndex: false,
                columns: [
                    {
                        title: "接口名称",
                        key: "name"
                    },
                    {
                        title: "接口单价",
                        key: "price"
                    },
                    {
                        title: "接口来源",
                        key: "source"
                    },
                    {
                        title: "接口参数",
                        key: "param"
                    },
                    {
                        title: "接口返回字典",
                        key: "dict"
                    },
                    {
                        title: "操作",
                        render: 
                        
                        // h => {
                        //     console.log("render", this);
                        //     return (
                        //         <div>
                        //             <b-btn
                        //                 variant="outline-success borderless"
                        //                 class="btn-xs"
                        //             >
                        //                 <i
                        //                     class="ion ion-md-create"
                        //                     onClick={function() {
                        //                         console.log(
                        //                             "expendNodeAdb",
                        //                             this
                        //                         );
                        //                         return this.expendNodeAbd;
                        //                     }}
                        //                 />
                        //             </b-btn>
                        //         </div>
                        //     );
                        // }

                        // function(h,context){
                        // console.log('render',this,context);
                        // return (
                        //   <div>
                        //     <b-btn variant="outline-success borderless" class="btn-xs">
                        //       <i class="ion ion-md-create" onClick={function(){
                        //         console.log('expendNodeAdb',this)
                        //         return this.expendNodeAbd
                        //       }} />
                        //     </b-btn>
                        //   </div>
                        // )
                        // }

                        (h, params) => {
                          // console.log(JSON.stringify(params.row.name));
                          let vmdd = this;
                          console.log('render',this)

                          if (params.row.name === "企业工商信息") {
                            return (
                              <div>
                                <b-btn variant="outline-success borderless" class="btn-xs">
                                  <i class="ion ion-md-create" />
                                </b-btn>
                                <b-btn variant="outline-danger borderless" class="btn-xs">
                                  <i class="ion ion-md-close" />
                                </b-btn>

                                <b-btn
                                  variant="outline-danger borderless"
                                  class="btn-xs"
                                  onClick={ () => {
                                    console.log('click',this);
                                    return vmdd.expendNodeAbd(params);
                                  }}
                                >
                                  <i class="ion ion-md-close" /> 下探
                                </b-btn>
                              </div>
                            );
                          } else {
                            return <div />;
                          }
                        }
                    }
                ],
                tableData: []
            },

            data: [
                {
                    text: "保理订单号:34001",
                    icon: "far fa-circle"
                },
                {
                    text: "业务员:李四",
                    icon: "far fa-circle"
                },
                {
                    text: "卖方资料",
                    icon: "fas fa-circle",
                    opened: true,
                    children: [
                        {
                            text: "XXXX工厂",
                            icon: "far fa-circle"
                        },
                        {
                            text: "法人：张三",
                            icon: "far fa-circle"
                        }
                    ]
                },
                {
                    text: "买方方资料",
                    icon: "fas fa-circle",
                    opened: true,
                    children: [
                        {
                            text: "恒大地产",
                            icon: "far fa-circle"
                        },
                        {
                            text: "法人：许家印",
                            icon: "far fa-circle"
                        }
                    ]
                },
                {
                    text: "资方资料",
                    icon: "fas fa-circle",
                    opened: true,
                    children: [
                        {
                            text: "XXXX银行",
                            icon: "far fa-circle"
                        },
                        {
                            text: "法人：张三",
                            icon: "far fa-circle"
                        }
                    ]
                },
                {
                    text: "应收账款",
                    icon: "fas fa-circle",
                    opened: true,
                    children: [
                        {
                            text: "发票：0001",
                            icon: "far fa-circle"
                        },
                        {
                            text: "发票：0002",
                            icon: "far fa-circle"
                        }
                    ]
                }
            ],
            tableData: [],
            columns: [
                {
                    title: "接口名称",
                    key: "name"
                },
                {
                    title: "接口单价",
                    key: "price"
                },
                {
                    title: "接口来源",
                    key: "source"
                },
                {
                    title: "接口参数",
                    key: "param"
                },
                {
                    title: "接口返回字典",
                    key: "dict"
                },
                {
                    title: "操作",
                    render: h => {
                        console.log(this);
                        return (
                            <div>
                                <b-btn
                                    variant="outline-success borderless"
                                    class="btn-xs"
                                >
                                    <i
                                        class="ion ion-md-create"
                                        onClick={function() {
                                            console.log("expendNodeAdb", this);
                                            return this.expendNodeAbd;
                                        }}
                                    />
                                </b-btn>
                            </div>
                        );
                    }
                }
            ],
            options: {
                pagination: { chunk: 0 },
                filterable: false,
                perPageValues: [],
                sortIcon: {
                    is: "fa-sort",
                    base: "fas",
                    up: "fa-sort-up",
                    down: "fa-sort-down"
                }
            },
            sizes: [
                { text: "Small", value: "sm" },
                { text: "Medium", value: null },
                { text: "Large", value: "lg" }
            ],
            defaultModalSize: null,
            topModalSize: null,
            fillInModalSize: null,
            icons: {
                beaker: '<i class="ion ion-ios-flask text-big"></i>',
                fork: '<i class="ion ion-md-git-branch text-big"></i>',
                heart: '<i class="ion ion-ios-heart text-big"></i>'
            }
        };
    },
    computed: {
        treeDataJson() {
            return JSON.stringify(this.treeData);
        }
    },

    created() {
        this.loadTaleData();
    },
    methods: {
        // 加载table数据
        loadTaleData(target) {
            const req = new XMLHttpRequest();
            const url =
                target === 2
                    ? "/static/json/datadown-list-002.json"
                    : "/static/json/datadown-list.json";

            req.open("GET", url);

            req.onload = () => {
                const data = JSON.parse(req.response);

                this.table.tableData = data;
            };

            req.send();
        },

        // 树节点点击事件
        itemClick(node) {
            // console.log(node.model.text + " clicked !");

            console.log("itemClick", this, vueComponentThis);

            //laod Table
            let target = 1;
            if (node.model.text === "恒大地产") {
                target = 2;
            }
            this.loadTaleData(target);

            //
            this.editingNode = node;
            this.editingItem = node.model;

            // this.editingItem.addChild({
            //     text: "newNode"
            //   });
            // console.log(this.editingItem)
            // Trigger model update by clonning data
            // this.treeData = this.treeData.slice(0);
        },

        // 扩展子节点
        expendNodeAbd(row) {
            // console.log('expendNodeAbd',this);
            console.log("expendFn", this);
            // console.log('vueComponentThis',vueComponentThis.a.data().editingItem);
            // console.log(row);
            // console.log(this.editingItem)
            // console.log(this.$refs.tree2)
            // if (this.editingItem) {
            this.editingItem.addChild({
              text: "newNode123"
            });
            // }
        }
    }
};
</script>
